<template>
   <div class="app-goods">
    <Query
      :items="queryColumns"
      :initial-params="queryParams"
      @query="handleQuery"
      labelWidth="100px"
    />
    <Table
      :table-columns="tableColumns"
      :table-loading="tableLoading"
      :table-data="tableData"
      :total="total"
      @pagination="handlePagination"
    >
      <template v-slot:tools>
        <el-button-group>
          <el-button type="primary" @click="handleAdd">添加商品</el-button>
        </el-button-group>
      </template>
      <template #coverImg="scope">
        <img :src="scope.row.coverImg" style="width: 100px;height: 60px;" alt="">
      </template>
      <template #status="scope">
        <el-switch
          v-model="scope.row.status"
          @change="changeValue"
          :active-value="1"
          :inactive-value="0"
          active-color="#13ce66"
          inactive-color="#ff4949"
        ></el-switch>
      </template>
      <template #opt="scope">
        <el-button type="primary" link @click="handleLook(scope.row)">详情</el-button>
        <el-button type="primary" link @click="handleEdit(scope.row)" v-if="scope.row.status !== 2">编辑</el-button>
        <el-button type="primary" link @click="handleStatus(scope.row)">{{ scope.row.status === 2 ? "下架" : "上架" }}</el-button>
        <el-button type="danger" v-if="scope.row.status !== 2" link @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </Table>
    <DialogForm
      v-model:visible="showDialog"
      :title="dialogTitle"
      :form-items="formItems"
      :form-data="formData"
      :form-rules="formRules"
      :loading="loading"
      width="650px"
      @submit="handleSubmit"
    />
   </div>
</template>

<script setup name="goods">
import Table from "@/components/Table/index.vue";
import Query from "@/components/Query/index.vue";
import DialogForm from '@/components/FormDialog/index.vue'
import { getGoodsList, changeGoodStatus, saveGoods } from "@/api/goods/index";
import { useRouter } from 'vue-router'
const router = useRouter()
const { proxy } = getCurrentInstance()
const tableData = ref([])
const total = ref(0)
const tableLoading = ref(true)
const dialogTitle = ref('')
const loading = ref(false)
const showDialog = ref(false)
const formRules = ref({
  goodsName: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
  goodsModel: [{ required: true, message: '请输入商品型号', trigger: 'blur' }],
  goodsLv: [{ required: true, message: '请选择能耗级别', trigger: 'change' }],
  price: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],
  subsidyPrice: [{ required: true, message: '请输入补贴后价格', trigger: 'blur' }],
  goodsIntro: [{ required: true, message: '请输入商品简介', trigger: 'blur' }],
  coverImg: [{ required: true, message: '请上传封面图', trigger: 'change' }]
})

const formData = ref({})

const data = reactive({
  tableColumns: [
    { label: "商品名称", prop: "goodsName" },
    { label: "封面图", prop: "coverImg", slot: "coverImg" },
    { label: "商品型号", prop: "goodsModel" },
    { label: "能耗级别", prop: "goodsLv", formatter: row => row.goodsLv === 1 ? '一级能耗' : '二级能耗' },
    { label: "商品价格", prop: "price" },
    { label: "补贴后价格", prop: "subsidyPrice" },
    { label: "商品状态",  prop: "delFlag", formatter: row => row.status === 1 ? '待上架' : '已上架' },
    { label: "商品简介", prop: "goodsIntro"},
    { label: "创建时间", prop: "gmtCreate"},
    { label: "操作", slot: "opt", fixed: "right",minWidth:140}
  ],
  queryColumns: [
   { label: "能耗级别", prop: "goodsLv", type: 'select', options: [{ label: '一级', value: 1 }, { label: '二级', value: 2 }] },
   { label: "商品型号", prop: "goodsModel", type: 'input', attrs: { placeholder: '请输入商品型号' } },
   { label: "商品名称", prop: "goodsName", type: 'input',  attrs: { placeholder: '请输入商品名称' } },
   { label: "商品简介", prop: "goodsIntro", type: 'input',  attrs: { placeholder: '请输入商品简介' } },
  ],
  pageParams: {
   current: 1,
   size: 10
  },
  queryParams: {},
  formItems: [
   { label: "商品名称", prop: "goodsName", type: 'input', attrs: { placeholder: '请输入商品名称' } },
   { label: "商品型号", prop: "goodsModel", type: 'input', attrs: { placeholder: '请输入商品型号' } },
   { label: "能耗级别", prop: "goodsLv", type: 'select', options: [{ label: '一级', value: 1 }, { label: '二级', value: 2 }] },
   { label: "商品价格", prop: "price", type: 'input', attrs: { placeholder: '请输入商品价格' } },
   { label: "补贴后价格", prop: "subsidyPrice", type: 'input', attrs: { placeholder: '请输入补贴后价格' } },
   { label: "商品简介", prop: "goodsIntro", type: 'input', attrs: { placeholder: '请输入商品简介' } },
   { label: "封面图", prop: "coverImg", type: 'upload', attrs: { limit: 1, listType: 'picture-card' } },
  ]
})

const { tableColumns, queryColumns, pageParams, queryParams, formItems } = toRefs(data)
/** 获取列表数据 */
const getList = () => {
   tableLoading.value = true
   const data  = {
      ...queryParams.value,
      ...pageParams.value
   }
   getGoodsList(data)
   .then(res => {
      tableData.value = res.data.records
      total.value = res.data.total
   })
   .finally(() => {
      tableLoading.value = false
   })
}
getList()

/** 搜索按钮操作 */
const handleQuery = (val) => {
  queryParams.value = val
  getList()
}
/** 打开新增弹窗 */
const handleAdd = () => {
  router.push({
    path: '/goods/add',
  })
}

/** 打开编辑弹窗 */
const handleEdit = (row) => {
  router.push({
    path: '/goods/add',
    query: {
      id: row.id
    }
  })
}
const handleLook = row => {
  router.push({
    path: '/goods/detail',
    query: {
      id: row.id
    }
  })
}
/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除此数据？').then(function() {
    saveGoods({id: row.id, delFlag: -1}).then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
  })
}
/** 删除按钮操作 */
function handleStatus(row) {
  proxy.$modal.confirm(`是否确认${row.status === 2 ? "下架" : "上架"}此数据？`).then(function() {
    changeGoodStatus({id: row.id, status: row.status === 2 ? 1 : 2 }).then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
  })
}
const handlePagination = (val) => {
  pageParams.value = val
  getList()
}
const handleSubmit = async (data) => {
  loading.value = true
  try {
    // 这里调用API进行提交
    await saveGoods(data)
    showDialog.value = false
    getList()
    proxy.$modal.msgSuccess("操作成功")
  } finally {
    loading.value = false
  }
}
</script>

<style>
.app-goods {
  padding: 8px;
}
</style>